<template>
	<default-header-page-layout ref="page" title="出库作业" >
		<view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<action-user-row />
			<view class="with-action-user-row-page-content">
				<view class="fapao-out-page-content">
					<view class="entrance-row">
						<easy-select-form-item
							label="出库口"
							v-model="form.OutputEntrance"
							:msg="msg.OutputEntrance"
							:msg-type="msgType.OutputEntrance"
							:list="selectList.entrances"
							value-field="code"
							label-field="name"
							:clearable="false"
							@select="onEntranceSelect"
						/>
					</view>
					<view class="info-action-box">
						<view v-if="hasInfo">
							<view class="info-block info-block-style1">
								<view class="style1-row">
									<view class="label">出库单类别：</view>
									<view class="content auto-wrap">{{orderObj.orderNo}}</view>
								</view>
								<view class="style1-row">
									<view class="label">出库单编号：</view>
									<view class="content auto-wrap">{{orderObj.orderSubclass}}</view>
								</view>
							</view>
							
							<view class="info-block info-block-style2">
								<view class="list-head">
									<view class="list-row">
										<view class="list-cell list-cell1">层</view>
										<view class="list-cell list-cell2">物料编号</view>
										<view class="list-cell list-cell3">尺寸</view>
									</view>
								</view>
								<view class="list-body">
									<view class="list-row" v-for="(item,index) in list" :key="index">
										<view class="list-cell list-cell1">{{list.length-index}}</view>
										<view class="list-cell list-cell2">{{item.materialNo}}</view>
										<view class="list-cell list-cell3">{{item.long}}*{{item.wide}}*{{item.high}}</view>
									</view>
								</view>
							</view>
							
							<scan-input-form-item
								label="标签扫描"
								v-model="form.packCode"
								:msg="msg.packCode"
								:msg-type="msgType.packCode"
								:has-search="false"
								@clear="onClearPackCode"
							/>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<template v-slot:footer>
			<view class="bottom-btns-row">
				<view class="btn-frame left-btn-frame"><u-button text="刷 新" :disabled="!form.OutputEntrance" @click="onResetPage"></u-button></view>
				<view class="btn-frame right-btn-frame"><u-button type="primary" :disabled="list.length<=0 || !form.packCode" text="提 交" @click="onSubmit"></u-button></view>
			</view>
		</template>
	</default-header-page-layout>
</template>

<script>
import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
import ActionUserRow from '@/components/ActionUserRow.vue'
import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
import EasySelectFormItem from '@/components/EasySelectFormItem.vue'
import { $alert, $successInfo } from '@/static/js/utils/index.js'
let initInterVal = null;
const defaultForm = {
	packCode:'',
	OutputEntrance:''
}
export default {
	name:'fapaoOutStorePage',
	components:{DefaultHeaderPageLayout,ActionUserRow,ScanInputFormItem,EasySelectFormItem},
	data(){
		return {
			pageBodyHeight:0,
			step:1,
			form:{...defaultForm},
			msg:{
				packCode:'',
				OutputEntrance:''
			},
			msgType:{
				packCode:'error',
				OutputEntrance:'error'
			},
			orderObj:{},
			list:[],
			hasInfo:false,
			selectList:{
				entrances:[]
			}
		}
	},
	computed:{
		confirmBtnDisabled(){
			let res = true;
			if (this.materialObj.id && this.form.entranceId) {
				res = false
			}
			return res;
		}
	},
	methods:{
		/* 清除标签 */
		onClearPackCode(){
			this.resetPackCode()
		},
		resetPackCode(){
			this.form.packCode = ''
		},
		/* 重置出库数据 */
		resetOutInfo(){
			this.resetPackCode()
		  this.orderObj = {};
		  this.list = []
			this.hasInfo = false
		},
		onEntranceSelect(val){
			this.getOutInfo(val)
		},
		onResetPage(){
			this.getOutInfo(null)
		},
		getSelectOptions(){
			this.$api.get('listNonPage',{type:2},{block:'wentrance'}).then(d=>{
				this.selectList.entrances = d || []
			}).catch(()=>{})
		},
		/* 获取出库数据 */
		getOutInfo(code,callback,needloding=true){
			let params = {}
			if (code) {
				params.OutputEntrance = code
			} else {
				params.OutputEntrance = this.form.OutputEntrance
			}
			if (needloding) {
				uni.showLoading({
					title: '加载中...',
					mask:true
				});
			}
			this.$api.get('GetPackInfomation',params,{block:'fapaoOut',loading:false}).then((d)=>{
				this.orderObj = {
					orderNo:d.orderNo,
					orderSubclass:d.orderSubclass
				}
				this.list = d.groupDiskOutWarehouseList || []
				this.hasInfo = true
				if (needloding) {
					uni.hideLoading();
				}
				callback && callback(true)
			}).catch((_errmsg)=>{
				this.resetOutInfo()
				if (needloding) {
					uni.hideLoading();
				}
				callback && callback(false,_errmsg)
			})
		},
		/* 响应提交按钮 */
		onSubmit(){
			this.dealConfirm((f)=>{
				if (f) {
					$successInfo('出库成功')
					this.resetOutInfo()
				}
			})
		},
		/* 提交接口调用 */
		dealConfirm(callback){
			let params = {
			  materialNoList:this.list,
			  packCode:this.form.packCode
			}
			this.$api.post('Pack',params,{block:'fapaoOut'}).then(()=>{
				callback && callback(true)
			}).catch((e)=>{
				callback && callback(false,e)
			})
		},
		/* 页面初始化获取页面body高度的定时器 */
		startInitInterval(callback){
			initInterVal = setInterval(()=>{
				if (this.pageBodyHeight) {
					this.clearInitInterval()
					callback && callback()
				} else {
					this.pageBodyHeight = this.$refs.page.getBodyHeight()
				}
			},200)
		},
		/* 清除定时器 */
		clearInitInterval(){
			try{
				clearInterval(initInterVal)
				initInterVal = null
			}catch(e){
				//TODO handle the exception
			}
		}
	},
	onReady(){
		this.startInitInterval(()=>{
			this.getSelectOptions()
			/* 页面初始化后需要执行的代码在这边调用 */
		})
	},
	onUnload(){
		this.clearInitInterval()
	}
}
</script>

<style scoped lang="scss">
.bottom-btns-row{
	display: flex;
	padding: 10rpx 0;
	background-color: $uni-bg-color;
	.btn-frame{
		width: 50%;
		box-sizing: border-box;
	}
	.left-btn-frame{
		padding-left: 20rpx;
		padding-right: 8rpx;
	}
	.right-btn-frame{
		padding-right: 20rpx;
		padding-left: 8rpx;
	}
}
.fapao-out-page-content{
	display: flex;
	flex-direction: column;
	height: 100%;
	.entrance-row{
		flex-shrink: 0;
		padding-bottom: 24rpx;
	}
	.info-action-box{
		flex-grow: 1;
		height: 1px;
	}
}
.info-block{
	background-color: $uni-bg-color;
	box-shadow: 0px 2rpx 6rpx rgba(34, 25, 25, 0.2);
	font-size: 1.1em;
}
.info-block-style1{
	padding: 8rpx 16rpx;
	margin-bottom: 24rpx;
	.style1-row{
		border-bottom: 2rpx dashed $uni-text-color-grey;
		display: flex;
		&>.label{
			opacity: .7;
			flex-shrink: 0;
			width: 190rpx;
			text-align: right;
			padding-top: 11rpx;
		}
		&>.content{
			width: 1px;
			flex-grow: 1;
			line-height: 1.5em;
			padding: 8rpx 0;
		}
		&:last-child{
			border-bottom: 0;
		}
	}
}
.info-block-style2{
	$border-style:2rpx dashed $uni-border-color;
	margin-bottom: 24rpx;
	.list-head{
		border-bottom: $border-style;
		font-weight: bold;
	}
	.list-row{
		display: flex;
		border-bottom: $border-style;
		&:last-child{
			border-bottom: 0;
		}
		.list-cell{
			word-break:break-all;
			word-wrap:break-word; 
			align-items: center;
			justify-content: center;
			display: flex;
			box-sizing: border-box;
			padding: 8rpx 6rpx;
		}
		.list-cell1{
			flex-shrink: 0;
			width: 70rpx;
		}
		.list-cell2,.list-cell3{
			width: 1px;
			border-left: $border-style;
		}
		.list-cell2{
			flex-grow: 2;
		}
		.list-cell3{
			flex-grow: 3;
		}
	}
}
</style>